<template>
	<div class="base-chart">
		<div ref="container" class="chart-container"></div>
	</div>
</template>

<script>
	import options from './pie'
	import * as echarts from 'echarts'
	
	export default {
		name: 'BaseChart',
		props: {
			data: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		watch: {
			'data.ddr.transform.width': function(value) {
				this.echartsInstance.resize()
			},
			'data.ddr.transform.height': function(value) {
				this.echartsInstance.resize()
			},
		},
		data() {
			return {
				echartsInstance: null,
			}
		},
		mounted() {
			this.echartsInstance = echarts.init(this.$refs.container)
			this.echartsInstance.setOption(options)
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.base-chart {
		height: 100%;
		
		.chart-container {
			height: 100%;
		}
		
	}
</style>